<template>
<div class="stockOpe">
    <component-title :title-text="'股票操作'"></component-title>
    <div class="stockContent" v-if='status == 0'>
    <div class="stockCharts">
      <div ref="mChartLeft" style="width:50%;height:160px" class="fl">
      </div>
      <div ref="mChartRight" style="width:50%;height:160px" class="fl">
      </div>
    </div>
    <div class="describe">
      <div class="left">超过<span v-text='positionIndex'></span>股民</div>
      <div class="right">超过<span v-text='retracementMaxIndex'></span>股民</div>
    </div>
  </div>
  <return-empty v-if='status == 1'></return-empty>
  <return-error v-if='status == 2'></return-error>
</div>
</template>
<script>
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import RemoteDAO from '@/common/remoteDAO'
import constant from '@/common/constant'
import Title from '@/components/Title'

const stockOpe = {
  tooltip: {
    show: false,
    trigger: 'axis',
    showContent: false
  },
  calculable: false,
  color: ['#ddd', '#ff7c00'],
  series: [{
    type: 'pie',
    radius: ['70%', '75%'],
    clockwise: false,
    label: {
      normal: {
        show: true,
        position: 'center',
        textStyle: {
          fontSize: 20
        }
      },
      silent: true
    }
  }]
}
export default {
  props: ['fathertime','assetStat'],
  data() {
    return {
      positionAvg: '',
      retracementMax: '',
      positionIndex: '',
      retracementMaxIndex: '',
      myChartLeft: '',
      myChartRight: '',
      timeIn: '',
      status: 0
    }
  },
  components:{
    'component-title':Title
  },
  mounted() {
    this.initStock();
  },
  beforDestroy() {
    echarts.dispose(this.myChartLeft)
    echarts.dispose(this.myChartRight)
  },
  watch: {
    fathertime: function() {
      this.initStock();
    },
    assetStat:function() {
      this.initStock();
    }
  },
  methods: {
    renderChart() {
      if (!this.myChartLeft && !this.myChartRight) {
        this.myChartLeft = echarts.init(this.$refs.mChartLeft);
        this.myChartRight = echarts.init(this.$refs.mChartRight);
        this.myChartLeft.setOption(stockOpe)
        this.myChartRight.setOption(stockOpe)
      }

      this.myChartLeft.setOption({
        series: [{
          data: [{
              value: 100 - this.positionAvg,
              name: '平均仓位'
            },
            {
              value: this.positionAvg,
              name: this.positionAvg + '%'
            }
          ]
        }]
      });

      this.myChartRight.setOption({
        series: [{
          data: [{
              value: 100 - this.retracementMax,
              name: '最大回撤'
            },
            {
              value: this.retracementMax,
              name: this.retracementMax + '%'
            }
          ]
        }]
      })
    },
    initStock() {
      this.timeIn = constant.TimeTabData[this.fathertime];
      RemoteDAO.callZL13100043({
        "recent": this.timeIn.name
      }, this.ZL13100043);
    },
    ZL13100043(result) {
      if (result.error == '1') {
        this.status = 2
        return;
      } else {
        let data = result.data;
        let bigdata = JSON.parse(data).body[0].bigdata;
        let empty = JSON.parse(bigdata).hits.hits;
        if (empty.length == 0) {
          this.status = 1;
          return;
        } else {
          this.status = 0;
          let specData = JSON.parse(bigdata).hits.hits[0]._source;
          this.positionAvg = specData.position_avg;
          this.retracementMax = specData.retracement_max;
          this.positionIndex = specData.position_index + '%';
          this.retracementMaxIndex = specData.retracement_max_index + '%';

          this.renderChart();
        }
      }
    }
  }
}
</script>
<style scoped>
.stockOpe {
  background: #fff;
  margin-top: 15px;
  padding: 40px 0;
}

.stockContent {
  text-align: center;
  font-size: 24px;
  overflow: hidden;
}

.describe {
  font-size: 20px;
  margin-bottom: 70px;
  color: #999;
}

.describe div {
  width: 50%;
  float: left;
}
</style>
